@charset "UTF-8";
/* 0 - 全局
-------------------------------- */
html, body,
dl, dt, dd, ol, ul,
h1, h2, h3, h4, h5, h6,
pre, code, form, p,
fieldset, legend, figure{
    margin: 0;
    padding: 0;
}

body{
    color: #353535;
    font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

@media screen and (max-width: 500px){
    html[resize] body{
        font-size: 14px;
    }
}

@media screen and (min-width: 1930px){
    html[resize] body{
        font-size: 18px;
    }
}

*, *:before, *:after{
    box-sizing: border-box;
}

/* - 部分老式浏览器的更正 */
article, aside,
header, footer,
nav, section, main{
    display: block;
}

/* - 选择内容 */
::-moz-selection{
    color: #fff;
    background-color: rgba(0, 0, 0, .66);
}

::selection{
    color: #fff;
    background-color: rgba(0, 0, 0, .66);
}



/* 1 - 容器
-------------------------------- */
.wrap{
    margin-left:auto;
    margin-right: auto;
    max-width: 1200px;
    padding: 0 1.25em;
    box-sizing: content-box;
}

.wrap.min{
    max-width: 800px;
}
.wrap.mid{
    max-width: 1000px;
}
.wrap.max{
    max-width: 1600px;
}

.wrap.full{
    max-width: 100%;
}
.wrap.thin{
    padding: 0 .75em;
}
.wrap.thick{
    padding: 0 1.5em;
}
.wrap.clear{
    padding-left: 0;
    padding-right: 0;
}

.clearfix:after{
    content: '';
    clear: both;
    display: block;
}

.overflow{
    overflow: auto;
}

/* 2 - 元素
-------------------------------- */
h1{
    font-size: 2em;
}

h1, h2, h3, h4, h5, h6{
    margin-bottom: 1rem;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{
    margin-bottom: 0;
}

p{
    line-height: 1.8em;
    margin-bottom: 1em;
}

a{
    color: #3498db;
    text-decoration: none;
}

a:hover{
    color: #ffc670;
}

abbr[title]{
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted;
}

em, mark, kbd{
    padding: 0 .5em;
    border-radius: .5em;
    display: inline-block;
}

em{
    color: #fff;
    font-style: normal;
    background: #3498db;
}

kbd{
    color: #fff;
    font-size: 90%;
    background: #333;
    font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
}

audio{
    vertical-align: middle;
}

img, svg, video{
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* - 嵌入式网页 */
iframe{
    border: none;
}
/* - 栅格系统 */
.row{
    display: flex;
    flex-wrap: wrap;
    margin-left: -1.25em;
    margin-right: -1.25em;
}

.row.thin{
    margin-left: -1em;
    margin-right: -1em;
}

.row.full{
    margin-left: 0;
    margin-right: 0;
}

.row.scrollable{
    overflow: auto;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
}


/* -- 对齐方式 */
.row.right{ justify-content: flex-end; }
.row.center{ justify-content: center; }
.row.around{ justify-content: space-around; }
.row.between{ justify-content: space-between; }

/* -- 网格间距 */
.row [class*="col-"]{
    position: relative;
    padding-left: 1.25em;
    padding-right: 1.25em;
}

.row.thin [class*="col-"]{
    padding-left: 1em;
    padding-right: 1em;
}

.row.full [class*="col-"]{
    padding: 0;
    margin-bottom: 0;
}



/* --- 手机 */
@media screen and (min-width: 600px){
    .row .col-s-1{
        -ms-flex: 0 0 8.3333%;
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .row .col-s-2{
        -ms-flex: 0 0 16.6666%;
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }

    .row .col-s-3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .col-s-4{
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .row .col-s-5{
        -ms-flex: 0 0 41.3333%;
        flex: 0 0 41.6666%;
        max-width: 41.6666%;
    }

    .row .col-s-6{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row .col-s-7{
        -ms-flex: 0 0 58.3333%;
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .row .col-s-8{
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }

    .row .col-s-9{
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .row .col-s-10{
        -ms-flex: 0 0 83.3333%;
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .row .col-s-11{
        -ms-flex: 0 0 91.6666%;
        flex: 0 0 91.6666%;
        max-width: 91.6666%;
    }

    .row .col-s-12{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.button1{
    width: 60px;
    height: 30px;
    background-color: #f8bd24;
    margin-left: 10px;
}
.wrap .button1:hover{
	transform: translateY(-3px);
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
